<template>
    <div class="header">
        <div class="header-left">
          <div class="iconfont back-icon">&#xe61b;</div>
        </div>
        <div class="header-input">
           <span class="iconfont search-icon" >&#xe615;</span>
          输入城市/景点/游玩主题</div>
        <div class="header-right">
          城市
           <span class="iconfont triangle-icon">&#xe619;</span>
          </div>
    </div>
</template>

<script>
  export default {
    name:'HomeHeader',
    data() {
      return {

      }
    },
  }
</script>
<style  lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header
        line-height 0.86 rem
        display flex
        background-color $bgColor
        color #fff
        .header-left
            width 0.64 rem
            float left
            .back-icon
              font-size .8rem
        .header-input
            flex 1
            height .64rem
            line-height .64rem
            margin-top .12rem
            margin-left .2rem
            background-color #fff
            border-radius .1rem
            color #ccc
            padding-left .1rem
            .search-icon
              font-size .5rem
              float left
        .header-right
            width 1.24 rem
            float right 
            text-align center
            .triangle-icon
              font-size .6rem
              float right 
              margin-left -.3rem

</style>